Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@codemirror/language-data
Advanced tools
Language metadata and dynamic loading for the CodeMirror code editor
@codemirror/language-data is a package that provides language data for the CodeMirror editor. It includes language definitions, syntax highlighting, and other language-related features that can be used to enhance the CodeMirror editor's functionality.
Language Support
This feature allows you to import and use language definitions provided by the package. In this example, we import the languages and find the JavaScript language definition.
import { languages } from '@codemirror/language-data';
const javascript = languages.find(lang => lang.name === 'javascript');
console.log(javascript);
Syntax Highlighting
This feature allows you to set up syntax highlighting for a specific language. In this example, we create an editor state with JavaScript syntax highlighting and attach it to the document body.
import { languages } from '@codemirror/language-data';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/view';
import { javascript } from '@codemirror/lang-javascript';
const state = EditorState.create({
doc: 'console.log("Hello, world!");',
extensions: [basicSetup, javascript()]
});
const view = new EditorView({
state,
parent: document.body
});
Language Configuration
This feature allows you to access and configure language-specific settings. In this example, we find the Python language definition and log its extensions.
import { languages } from '@codemirror/language-data';
const python = languages.find(lang => lang.name === 'python');
console.log(python.extensions);
highlight.js is a popular library for syntax highlighting. It supports a wide range of languages and is easy to integrate into web projects. Compared to @codemirror/language-data, highlight.js is more focused on static code highlighting rather than being part of an interactive code editor.
Prism is a lightweight, extensible syntax highlighter. It is designed to be easy to use and extend, with a focus on performance. Like highlight.js, Prism is more about static code highlighting and does not provide the interactive editing capabilities that @codemirror/language-data offers.
Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, code folding, and other features similar to CodeMirror. While Ace offers a comprehensive set of features for code editing, @codemirror/language-data is specifically designed to work with the CodeMirror editor.
[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]
This package implements language metadata and dynamic loading for the CodeMirror code editor.
The project page has more information, a number of examples and the documentation.
This code is released under an MIT license.
We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.
FAQs
Language metadata and dynamic loading for the CodeMirror code editor
We found that @codemirror/language-data demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.